<template>
  <div class="shop-page">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="container">
        <div class="logo">⚡ 极速商城</div>
        <nav class="nav">
          <a href="#">首页</a>
          <a href="#">分类</a>
          <a href="#">购物车</a>
          <a href="#">我的</a>
        </nav>
      </div>
    </header>

    <!-- 轮播图区域 - 优化版 -->
    <section class="banner-section">
      <div class="container">
        <div class="banner-slider">
          <NuxtImg 
            v-for="banner in bannersData.data?.data || []" 
            :key="banner.id"
            :src="banner.image" 
            :alt="banner.title"
            width="1200"
            height="400"
            class="banner-image"
            loading="eager"
            fetchpriority="high"
          />
        </div>
      </div>
    </section>

    <!-- 商品列表 - 优化版 -->
    <section class="products-section">
      <div class="container">
        <h2 class="section-title">
          <span class="title-icon">🔥</span>
          热门商品
        </h2>
        
        <!-- 首屏商品：立即渲染 -->
        <div class="products-grid">
          <template v-if="productsData.data.value?.data">
            <!-- 首屏4个商品 -->
            <div 
              v-for="product in firstScreenProducts" 
              :key="product.id" 
              class="product-item"
            >
              <ProductCard :product="product" :optimized="true" />
            </div>
            
            <!-- 其余商品：懒加载 -->
            <div 
              v-for="product in otherProducts" 
              :key="product.id" 
              class="product-item lazy-product"
            >
              <ClientOnly>
                <ProductCard :product="product" :optimized="true" />
                <template #fallback>
                  <ProductSkeleton />
                </template>
              </ClientOnly>
            </div>
          </template>
          
          <!-- 加载中显示骨架屏 -->
          <template v-else>
            <div v-for="i in 8" :key="i" class="product-item">
              <ProductSkeleton />
            </div>
          </template>
        </div>
      </div>
    </section>

    <!-- 底部 -->
    <footer class="footer">
      <div class="container">
        <p>© 2025 极速商城 - 首屏优化最佳实践演示</p>
      </div>
    </footer>

    <!-- 性能提示 -->
    <div class="perf-hint">
      <h3>✅ 优化版本</h3>
      <ul>
        <li>✅ SSR 服务端渲染</li>
        <li>✅ NuxtImg 图片优化</li>
        <li>✅ 智能懒加载</li>
        <li>✅ 并行请求数据</li>
        <li>✅ 骨架屏加载</li>
        <li>✅ 首屏优先渲染</li>
      </ul>
      <div class="perf-stats">
        <div v-if="loadTime" class="stat">
          <span class="label">加载时间:</span>
          <span class="value">{{ loadTime }}ms</span>
        </div>
      </div>
      <NuxtLink to="/shop-slow" class="compare-btn slow-btn">
        查看未优化版本 →
      </NuxtLink>
      <NuxtLink to="/shop-compare" class="compare-btn">
        性能对比分析 →
      </NuxtLink>
      <NuxtLink to="/" class="back-btn">
        ← 返回首页
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
// ✅ 优化1: SSR - 在服务端并行获取数据
const startTime = Date.now()

// ✅ 优化2: 并行请求，不阻塞
const [bannersData, productsData] = await Promise.all([
  useFetch('/api/banners'),
  useFetch('/api/products')
])

// ✅ 优化3: 首屏优先 - 只立即渲染首屏可见的商品（假设首屏显示4个）
const firstScreenProducts = computed(() => {
  return productsData.data.value?.data?.slice(0, 4) || []
})

const otherProducts = computed(() => {
  return productsData.data.value?.data?.slice(4) || []
})

// 性能监控
const loadTime = ref<number | null>(null)

onMounted(() => {
  loadTime.value = Date.now() - startTime
  console.log('✅ 页面加载完成，耗时:', loadTime.value, 'ms')
  
  // 性能指标
  if (window.performance) {
    const perfData = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming
    console.log('📊 性能指标:')
    console.log('  - DNS查询:', perfData.domainLookupEnd - perfData.domainLookupStart, 'ms')
    console.log('  - TCP连接:', perfData.connectEnd - perfData.connectStart, 'ms')
    console.log('  - 请求响应:', perfData.responseEnd - perfData.requestStart, 'ms')
    console.log('  - DOM解析:', perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart, 'ms')
    console.log('  - 资源加载:', perfData.loadEventEnd - perfData.loadEventStart, 'ms')
  }
})

// ✅ 优化4: 设置页面元信息（SEO优化）
useHead({
  title: '极速商城 - 首屏优化最佳实践',
  meta: [
    { name: 'description', content: '展示首屏优化最佳实践的电商首页，包含SSR、图片优化、懒加载等技术' },
    { name: 'keywords', content: 'Nuxt, SSR, 首屏优化, 性能优化, 电商' }
  ],
  link: [
    // ✅ 优化5: 预加载关键资源
    { rel: 'preconnect', href: 'https://images.unsplash.com' }
  ]
})
</script>

<style scoped>
.shop-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 100px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 头部 */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.nav {
  display: flex;
  gap: 30px;
}

.nav a {
  color: white;
  text-decoration: none;
  transition: opacity 0.3s;
  font-weight: 500;
}

.nav a:hover {
  opacity: 0.8;
}

/* 轮播图 */
.banner-section {
  background: white;
  padding: 20px 0;
  margin-bottom: 20px;
}

.banner-slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.banner-slider::-webkit-scrollbar {
  display: none;
}

.banner-image {
  width: 100%;
  max-width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* 商品区域 */
.products-section {
  padding: 20px 0;
}

.section-title {
  font-size: 28px;
  color: #333;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-icon {
  font-size: 32px;
  animation: flame 1.5s ease-in-out infinite;
}

@keyframes flame {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

.product-item {
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.product-item:nth-child(1) { animation-delay: 0.1s; }
.product-item:nth-child(2) { animation-delay: 0.2s; }
.product-item:nth-child(3) { animation-delay: 0.3s; }
.product-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 底部 */
.footer {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 30px 0;
  margin-top: 50px;
}

.footer p {
  text-align: center;
  margin: 0;
}

/* 性能提示 */
.perf-hint {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  max-width: 280px;
  border: 3px solid #4caf50;
}

.perf-hint h3 {
  margin: 0 0 15px 0;
  color: #4caf50;
  font-size: 16px;
}

.perf-hint ul {
  margin: 0 0 15px 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.8;
}

.perf-stats {
  background: #f0f8f0;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.stat {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.label {
  color: #666;
}

.value {
  color: #4caf50;
  font-weight: bold;
}

.compare-btn, .back-btn {
  display: block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.3s;
  margin-bottom: 10px;
  font-size: 12px;
}

.compare-btn:hover, .back-btn:hover {
  transform: translateY(-2px);
}

.slow-btn {
  background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
}

.back-btn {
  background: #999;
  margin-bottom: 0;
}
</style>

